/**
  author : sailing
  date : 2016-10-21
  fun: button
***/

<style lang="less">
  .vx-panel{
      width:400px;
      background:#f7f7f7;
      left:50%;
      z-index:2500;
      top:80px;
      box-shadow: 1px 2px 2px #ccc;
      min-height:100px;
      margin-left:-200px;
      border-radius:10px;
      position:absolute;
      
  }

  .shadow-bg{
    position:absolute;
    width:100%;
    height:100%;
  }

  .musicPanel{
    min-height:50px;
    position:relative;
    padding-right:10px;
    padding-left:10px;
    .uploadPanel{
      max-height:400px;
      overflow:hidden;
      min-height:400px;
      text-align:center;  
    }
    
    .ulList{
      margin-top:15px;
      margin-bottom: 15px;
      .liList{
        display:flex;
        line-height:50px;
      }
      label{
        width:120px;
        text-align:right;
      }
    }
  }
</style>

<template>

  <transition name="fadeIn">
  <div v-show="isShow">
    <div class="shadowDiv_all">
    </div>
    <div class="vx-panel" v-show="isShow">
      <musicPanelHeader text="添加光纤"></musicPanelHeader>
      <div class="musicPanel">
        <ul class='ulList'>
          <li class='liList'>
            <label>名称</label>
            <el-input
              placeholder="名称"
              style="width:180px;margin-left:15px;"
              v-model="fiberS.name">
            </el-input>
          </li>
          <li class='liList'>
            <label>芯数</label>
            <el-input
              placeholder="芯数"
              style="width:180px;margin-left:15px;"
              v-model="fiberS.cores">
            </el-input>
          </li>
          <li class='liList'>
            <label>起点</label>
            <el-input
              placeholder="起点"
              style="width:180px;margin-left:15px;"
              v-model="fiberS.start">
            </el-input>
          </li>
          <li class='liList'>
            <label>终点</label>
            <el-input
              placeholder="终点"
              style="width:180px;margin-left:15px;"
              v-model="fiberS.end">
            </el-input>
          </li>
          <li class='liList'>
            <label>距离</label>
            <el-input
              placeholder="距离"
              style="width:180px;margin-left:15px;"
              v-model="fiberS.len">
            </el-input>
          </li>
        </ul>
      </div>
      <musicPanelfoter></musicPanelfoter>
    </div>
  </div>
  </transition>
</template>

<script>
import musicPanelHeader from '../panel/panel_header'
import musicPanelfoter from '../panel/panel_foter'
import eventBus from '../../eventBus'
export default {
  data () {
    return {
      isShow: false,
      updata: false,
      fiberS: {
        start: '',
        end: '',
        cores: '',
        len: '',
        name: '',
        id: ''
      }
    }  
  },
  methods: {
    clickBnt (e, id) {
      console.log('dddddddddddddddddddddddd')
    },
    clickClose () {
    },
    submitBnt (e) {
      this.isShow = false
      if (this.radio === '') {
        return
      }
      if (this.update) {
        eventBus.bus.$emit('refreshFiberData', this.fiberS)
      } else {
        eventBus.bus.$emit('addFiberData', this.fiberS)
      }
    },
    musicChange (e) {
    },
    picChange (e) {
    },
    cancelBnt (e) {
      this.isShow = false
    }
  },
  mounted () {
    const that = this
    eventBus.bus.$on('addFiber', function (param) {
      that.isShow = true
      that.update = false
    })

    eventBus.bus.$on('refreshFiber', function (param) {
      that.fiberS = param
      that.isShow = true
      that.update = true
    })
    eventBus.bus.$on('drawLine', function (param) {
      that.portEdges = param.edges
    })
  },
  props: {
    bg: String,
    text: String
  },
  components: {musicPanelfoter, musicPanelHeader}
}
</script>